<template>
  <div>
    <!-- 分类标签 -->
    <div>
      <div class="tag-group sec-align">
        <el-button
          v-for="(sort, index) in sorts"
          @click="selectSort(sort)"
          type="text"
          :class="{'sec-text-btn': true, 'sec-btn-selected': sort.isSelect}"
          :key="index"
        >{{ sort.name }}</el-button>
      </div>
      <div class="tag-group sec-align">
        <el-button
        v-for="(year, index) in years"
        @click="selectYear(year)"
        type="text"
        :class="{'sec-text-btn': true, 'sec-btn-selected': year.isSelect}"
        :key="index"
        >{{ year.name }}</el-button>
      </div>
      <div class="tag-group sec-align">
        <el-button
        v-for="(type, index) in types"
        @click="selectType(type)"
        type="text"
        :class="{'sec-text-btn': true, 'sec-btn-selected': type.isSelect}"
        :key="index"
        >{{ type.name }}</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 视频区域 -->
    <div>
      <!-- 无限滚动 -->
      <ul
        class="infinite-list"
        style="overflow:auto"
        v-infinite-scroll="paramChangeHandle"
      >
        <el-row>
          <el-col
            :span="5"
            v-for="(video, index) in videos"
            :key="index"
            :offset="index % 4 == 0 ? 0 : 1"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
            >
              <img
                @click="playVideo(video)"
                :src="video.videoImg"
                class="image"
              >
              <div
                style="padding: 14px;"
                @click="videoDesc(video)"
              >
                <span>{{ video.videoName }}</span>
                <div class="bottom clearfix">
                  <span
                    v-if="video.videoDesc.length > 20"
                    class="sec-video-desc"
                  >{{ video.videoDesc.slice(0, 16) }}...</span>
                  <span
                    v-else
                    class="sec-video-desc"
                  >{{ video.videoDesc }}</span>
                  <!-- <time class="time">{{ currentDate }}</time> -->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </ul>
    </div>
  </div>
</template>

<script>
import { getConfig, queryVideos } from '@/api/system/system.js'
export default {
  data() {
    return {
      years: [],
      types: [],
      sorts: [ 
        {
          name:  "最多播放",
          value: 'hitTop',
          isSelect: false
        }, 
        {
          name: "最近更新",
          value: 'laterTop',
          isSelect: false
        }
      ],
      videos: [],
      queryParams: {
        laterTop: '',
        hitTop: '',
        createTimeYear: '',
        earlierYear: '',
        videoType: '',
        current: 1,
        pageSize: 10
      }
    };
  },
  async mounted() {
    // 获取筛选条件配置
    // const params_years = getConfig({ codeType: 'SEARCH_PARAMS_YEARS', codeValue: '' })
    // if (params_years) {
    //   this.years = this.parseSearchParams(params_years)
    // }
    const {data: typesRes} = await getConfig({ codeType: 'VIDEO_TYPE', codeValue: '' })
    if (typesRes.code === 200) {
      typesRes.data.cache.forEach(item => {
        var obj = {}
        obj.name = item.codeName
        obj.value = item.codeValue
        obj.isSelect = false
        this.types.push(obj)
      })
    }
    // const params_sorts = getConfig({ codeType: 'SEARCH_PARAMS_SORTS', codeValue: '' })
    // if (params_years) {
    //   this.sorts = this.parseSearchParams(params_sorts)
    // }
    // 生成日期查询条件
    const curentDate = new Date()
    for(var i = 1; i <= 4; i++) {
      var obj = {}
      obj.name = curentDate.getFullYear() - i
      obj.value = curentDate.getFullYear() - i
      obj.isSelect = false
      this.years.push(obj)
    }
    this.years.push({name: '更早', value: 5, isSelect: false})
    this.paramChangeHandle()
  },
  methods: {
    selectSort(param) {
      // 取消之前选中的按钮
      this.sorts.forEach(item => item.isSelect = false)
      // 选中当前点击的按钮
      param.isSelect = !param.isSelect
      // 选择条件后发起请求
      this.queryParams.hitTop = false
      this.queryParams.laterTop = false
      this.queryParams[param.value] = true
      this.paramChangeHandle()
    },
    selectType(param) {
      // 取消之前选中的按钮
      this.types.forEach(item => item.isSelect = false)
      // 选中当前点击的按钮
      param.isSelect = !param.isSelect
      this.queryParams.videoType = param.value
      this.paramChangeHandle()
    },
    selectYear(param) {
      // 取消之前选中的按钮
      this.years.forEach(item => item.isSelect = false)
      // 选中当前点击的按钮
      param.isSelect = !param.isSelect
      if (param.value === 5) {
        this.queryParams.earlierYear = true
      } else {
        this.queryParams.earlierYear = false
        this.queryParams.createTimeYear = param.name
      }
      this.paramChangeHandle()
    },
    parseSearchParams(config) {
      let params = []
      if(config) {
        config.forEach(item => {
          var obj = {}
          obj.name = item.codeName
          obj.value = item.codeValue,
          obj.isSelect = false
          params.push(obj)
        })
      }
      return params
    },
    async paramChangeHandle() {
      this.queryParams.current = this.queryParams.current ? 1 : (this.queryParams.current + 1)
      const {data: res} = await queryVideos(this.queryParams)
      if (res.code === 200) {
        this.videos = res.data.videos.records
      }
    }
  },
}
</script>

<style lang="css" scoped>
.sec-align {
  margin-left: 40px;
}
.sec-text-btn {
  color: black;
  outline: none;
}
.sec-btn-selected {
  color: white;
  background-color: orange;
  border: none;
  outline: none;
}
</style>